import styled from "@emotion/styled";
import { Empty, Pagination } from "antd";
import { windowSize } from "util/window";
import { ListContent } from "./list-content";

import { useSelector } from "react-redux";
import { contentObj, selectContent } from "screens/edit/edit.slice";
import { useEffect, useState } from "react";

const defaultPageSize = 10;

const ContentBoxScreen = () => {
  const allContent = useSelector(selectContent);
  const [content, setContent] = useState([] as contentObj[]);
  const [content_page, setContentPage] = useState(1);

  useEffect(() => {
    const c = allContent.slice(
      (content_page - 1) * defaultPageSize,
      content_page * defaultPageSize
    );
    if (c.length === 0) {
      setContentPage(1);
    } else {
      setContent(c);
    }
  }, [content_page,allContent]);

  return (
    <Content>
      {content.length ? (
        <>
          <>
            {content?.map((item, index) => (
              <ListContent key={index} data={item} />
            ))}
          </>
          <Pagination
            defaultCurrent={1}
            defaultPageSize={defaultPageSize}
            current={content_page}
            onChange={(page: number) => {
              setContentPage(page);
            }}
            total={allContent.length}
          />
        </>
      ) : (
        <Empty />
      )}
    </Content>
  );
};

const Content = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  height: 100%;

  min-width: 36rem;
  min-height: calc(100vh - 9rem);
  padding: 2rem;
  @media screen and (min-width: ${windowSize.medium}px) {
    width: calc(100% - 24rem);
  }
`;
export default ContentBoxScreen;
